<!--category  -->
<template>
  <div class="category">
    <div class="search_cpm">
      <page-search :search-form-config="searchFormConfig" @searchBtnClick="handleSearch" @resetBtnClick="handleReset"
        ref='mySearchRef'>
      </page-search>
    </div>
    <div class="table_cpm">
      <page-table ref="myTableRef" pageName="category" :table-config="tableConfig" @createOrEdit="handleCreateOrEdit"
        @exportData="handleExportData" @importData="handleImportData">
      </page-table>
    </div>
    <div class="modal_cpm">
      <page-modal :modal-form-config="modalFormConfigRef" :default-info='defaultInfo' page-name="category"
        ref='pageModalRef'></page-modal>
    </div>
    <export-data ref="exportDataRef" :dataList="dataList" :excel-config="CATEGORY_IMPORT"></export-data>
    <import-data ref="importDataRef" :excelConfig="CATEGORY_IMPORT" @onSuccess="handleOnSuccess"></import-data>

  </div>
</template>
<script setup lang='ts' >
import { computed } from "vue"
import { searchFormConfig } from "./config/search.config"
import { tableConfig } from "./config/table.config"
import { modalFormConfig } from "./config/modal.config"
import { CATEGORY_IMPORT } from "./config/export.config"
import { usePageSearch, usePageModal, useExport } from "@/hooks"

import { useStore } from "@/store"
const store = useStore()
let [handleSearch, handleReset, myTableRef, mySearchRef] = usePageSearch()

const modalFormConfigRef = computed(() => modalFormConfig)
const callbackEdit = () => {
  pageModalRef.value.dialogTitle = '修改分类'
}
const callbackCreated = () => {
  pageModalRef.value.dialogTitle = '添加分类'
}
let [handleCreateOrEdit, defaultInfo, pageModalRef] = usePageModal(callbackEdit, callbackCreated)
let { handleExportData,
  exportDataRef,
  dataList,
  importDataRef,
  handleImportData, handleOnSuccess } = useExport('category', store)

</script>
<style lang='less' scoped>
.table_cpm {
  margin-top: 15px;
}

.avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.tag {
  margin: 2px;
}
</style>
